<template>
  <div class="content">
    <div>
      <div class="content_item" @click="bulletFrameBtn(1)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">中面网格厚度</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(2)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">拉伸</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(3)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">扫掠</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(4)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">杆单元创建</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(5)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">梁单元创建</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(6)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">节点缝合</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(7)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">单元分离</div>
      </div>
      <div class="content_item" @click="bulletFrameBtn(8)">
        <div class="imageStyle">
          <img src="../assets/exchange.svg" alt="" class="icons" />
        </div>
        <div class="func-name">合并</div>
      </div>
    </div>
    <MediumMeshThickness></MediumMeshThickness>
    <Stretching3D></Stretching3D>
    <Scanning3D></Scanning3D>
    <RodUnitCreation></RodUnitCreation>
    <BeamUnitCreation></BeamUnitCreation>
    <NodeStitching></NodeStitching>
    <UnitSeparation></UnitSeparation>
    <JoinMesher></JoinMesher>
  </div>
</template>
<script setup lang="ts">
import MediumMeshThickness from "@/UI/components/rightMeshEdit/mediumMeshThickness.vue";
import Stretching3D from "@/UI/components/rightMeshEdit/3Dstretching.vue";
import JoinMesher from "@/UI/components/rightMeshEdit/joinMesher.vue";
import Scanning3D from "@/UI/components/rightMeshEdit/scanning3D.vue";
import RodUnitCreation from "@/UI/components/rightMeshEdit/rodUnitCreation.vue";
import BeamUnitCreation from "@/UI/components/rightMeshEdit/beamUnitCreation.vue";
import NodeStitching from "@/UI/components/rightMeshEdit/nodeStitching.vue";
import UnitSeparation from "@/UI/components/rightMeshEdit/unitSeparation.vue";
import { useRightMeshEditStore } from "@/UI/store/rightMeshEditStore";
import { _global } from "../store";
const rightMeshEditStore = useRightMeshEditStore();

function bulletFrameBtn(type: number) {
  closeAll();
  if (type == 1) {
    rightMeshEditStore.setMediumMeshThickness(true);
  } else if (type == 2) {
    rightMeshEditStore.setStretching3D(true);
  } else if (type == 3) {
    rightMeshEditStore.setScanning3D(true);
  } else if (type == 4) {
    rightMeshEditStore.setRodUnitCreationModel(true);
  } else if (type == 5) {
    rightMeshEditStore.setBeamModel(true);
  } else if (type == 6) {
    rightMeshEditStore.setNodeStitchingModel(true);
  } else if (type == 7) {
    rightMeshEditStore.setUnitSeparation(true);
  } else if (type == 8) {
    rightMeshEditStore.setJoinMesher(true);
  }
}
function closeAll() {
  rightMeshEditStore.setMediumMeshThickness(false);
  rightMeshEditStore.setStretching3D(false);
  rightMeshEditStore.setScanning3D(false);
  rightMeshEditStore.setRodUnitCreationModel(false);
  rightMeshEditStore.setBeamModel(false);
  rightMeshEditStore.setNodeStitchingModel(false);
  rightMeshEditStore.setUnitSeparation(false);
}
</script>
<style scoped lang="less">
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .content_item {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    padding-left: 3px;
    &:hover {
      background: #edeff2;
    }

    &:active {
      background: #dcdee1;
    }
    .imageStyle {
      margin-right: 3px;
    }
    .icons {
      width: 20px;
      height: 20px;
    }
    .func-name {
      font-size: 12px;
      height: 25px;
      line-height: 20px;
    }
  }
}
</style>
